import React, {Component} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {
  Assets,
  Colors,
  View,
  Button,
  Text,
  Incubator,
} from 'react-native-ui-lib';
import {
  renderMultipleSegmentOptions,
  renderBooleanOption,
  renderRadioGroup,
} from '../ExampleScreenPresenter';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestSuite, TestCase} from '@rnoh/testerino';

const {Toast} = Incubator;

const TOAST_ACTIONS = {
  none: {},
  label: {label: 'Undo', onPress: () => console.warn('undo')},
  icon: {
    iconSource: Assets.icons.demo.plus,
    onPress: () => console.warn('add'),
  },
};

const TOAST_MESSAGES = {
  general: 'La formule Pass VIP illimité 5 mois est masquée',
  success: 'The action completed successfully.',
  failure: 'The action could not be completed.',
  offline: 'Check Your Internet Connection',
};

class ToastsScreen extends Component {
  showToast = false; // keep this state in class instance for immediate response
  state = {
    visible: false,
    toastPosition: 'bottom' as Incubator.ToastProps['position'],
    isCustomContent: false,
    showLoader: false,
    selectedAction: 'none' as keyof typeof TOAST_ACTIONS,
    hasAttachment: false,
    selectedPreset: '' as Incubator.ToastProps['preset'] & '',
    isSwipeable: true,
  };

  toggleVisibility = () => {
    // Im using this for storing toast visible since setState is async and takes time to response
    // this.showToast = !this.showToast;
    // this.setState({
    //   visible: this.showToast,
    // });
    this.setState({visible: !this.state.visible})
  };

  renderCustomContent = () => {
    return (
      <View bg-$backgroundNeutralLight flex padding-10>
        <Text $textDefault text60>
          This is a custom content
        </Text>
        <Text $textDefault>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </Text>
      </View>
    );
  };

  renderAboveToast = () => {
    return (
      <View
        flex
        bottom
        right
        paddingB-50
        paddingR-20
        pointerEvents={'box-none'}>
        <Button
          iconSource={Assets.icons.demo.dashboard}
          color={Colors.$backgroundDefault}
          style={{height: 50, width: 50}}
        />
      </View>
    );
  };

  renderBelowToast = () => {
    return <Text $textDefault>Attachment below toast</Text>;
  };

  renderAttachment = () => {
    const {toastPosition, hasAttachment} = this.state;
    if (hasAttachment) {
      if (toastPosition === 'bottom') {
        return this.renderAboveToast();
      } else {
        return this.renderBelowToast();
      }
    }
  };

  getAction = () => {
    const {selectedAction} = this.state;
    return TOAST_ACTIONS[selectedAction];
  };

  getMessage = () => {
    const {selectedPreset} = this.state;

    return TOAST_MESSAGES[selectedPreset] || TOAST_MESSAGES.general;
  };

  renderToast = () => {
    const {
      visible,
      toastPosition,
      showLoader,
      isCustomContent,
      hasAttachment,
      selectedPreset,
      isSwipeable,
    } = this.state;
    const action = this.getAction();

    return (
      <Toast
        key={`${toastPosition}-${isCustomContent}-${hasAttachment}`}
        visible={visible}
        position={toastPosition}
        message={this.getMessage()}
        showLoader={showLoader}
        renderAttachment={this.renderAttachment}
        action={action}
        preset={selectedPreset}
        swipeable={isSwipeable}
        onDismiss={this.toggleVisibility}
        autoDismiss={3500}
        // backgroundColor={Colors.$backgroundSuccessLight}
        // icon={Assets.icons.demo.add}
        // iconColor={Colors.$backgroundSuccessHeavy}
        // style={{borderWidth: 1, borderColor: Colors.$outlineDisabled}}
        // messageStyle={Typography.text80BO}
      >
        {isCustomContent ? this.renderCustomContent() : undefined}
      </Toast>
    );
  };

  renderToggleButton = () => {
    return (
      <View centerH marginT-s5>
        <Button
          testID={`uilib.showToast`}
          marginT-10
          marginB-10
          label={'Toggle toast'}
          onPress={this.toggleVisibility}
        />
      </View>
    );
  };

  render() {
    return (
      <TestSuite name="IncubatorToasts">
        <TestCase itShould="">
          <View flex padding-5>
            <Text $textDefault h1 marginB-s4>
              Toast
            </Text>

            <View flex>
              <ScrollView contentContainerStyle={styles.scrollView}>
                {renderMultipleSegmentOptions.call(
                  this,
                  'Toast Position',
                  'toastPosition',
                  [
                    {label: 'Bottom', value: 'bottom'},
                    {label: 'Top', value: 'top'},
                  ],
                )}

                {renderBooleanOption.call(this, 'Show Loader', 'showLoader')}
                {renderBooleanOption.call(
                  this,
                  'Use custom content',
                  'isCustomContent',
                )}
                {renderBooleanOption.call(
                  this,
                  'With an attachment',
                  'hasAttachment',
                )}
                {/* {renderBooleanOption.call(this, 'Swipeable', 'isSwipeable')} */}

                {renderRadioGroup.call(
                  this,
                  'Action',
                  'selectedAction',
                  {None: '', Label: 'label', Icon: 'icon'},
                  {isRow: true},
                )}

                <Text $textDefault h3 marginV-s2>
                  Presets
                </Text>

                {renderMultipleSegmentOptions.call(this, '', 'selectedPreset', [
                  {label: 'None', value: ''},
                  {label: 'General', value: 'general'},
                  {label: 'Success', value: 'success'},
                  {label: 'Failure', value: 'failure'},
                  {label: 'Offline', value: 'offline'},
                ])}

                {this.renderToggleButton()}
              </ScrollView>
            </View>
            {this.renderToast()}
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default gestureHandlerRootHOC(ToastsScreen);

const styles = StyleSheet.create({
  scrollView: {
    paddingBottom: 80,
  },
});
